<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="utf-8" />  
    <title>ECharts-基本线性图及其配置要求</title>  
    <!-- ECharts单文件引入 -->
<script src="js/echarts.js"></script> 
</head>  
<body>  
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="box" style="height:400px;width: 800px;padding: 20px"></div>
    </div>  
    <script>
    // 获取到这个DOM节点，然后初始化

    var myChart = echarts.init(document.getElementById("box"));
    // app.title = '气泡图';

var data = [
    [[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,38195258,'Poland',1990],[19349,69.6,147568552,'Russia',1990],[10670,67.3,53994605,'Turkey',1990],[26424,75.7,57110117,'United Kingdom',1990],[37062,75.4,252847810,'United States',1990]],
    [[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,38611794,'Poland',2015],[23038,73.13,143456918,'Russia',2015],[19360,76.5,78665830,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321773631,'United States',2015]]
];

// option = {
//     backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
//         offset: 0,
//         color: '#f7f8fa'
//     }, {
//         offset: 1,
//         color: '#cdd0d5'
//     }]),
//     title: {
//         text: '1990 与 2015 年各国家人均寿命与 GDP'
//     },
//     legend: {
//         right: 10,
//         data: ['1990', '2015']
//     },
//     xAxis: {
//         splitLine: {
//             lineStyle: {
//                 type: 'dashed'
//             }
//         }
//     },
//     yAxis: {
//         splitLine: {
//             lineStyle: {
//                 type: 'dashed'
//             }
//         },
//         scale: true
//     },
//     series: [{
//         name: '1990',
//         data: data[0],
//         type: 'scatter',
//         symbolSize: function (data) {
//             return Math.sqrt(data[2]) / 5e2;
//         },
//         label: {
//             emphasis: {
//                 show: true,
//                 formatter: function (param) {
//                     return param.data[3];
//                 },
//                 position: 'top'
//             }
//         },
//         itemStyle: {
//             normal: {
//                 shadowBlur: 10,
//                 shadowColor: 'rgba(120, 36, 50, 0.5)',
//                 shadowOffsetY: 5,
//                 color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
//                     offset: 0,
//                     color: 'rgb(251, 118, 123)'
//                 }, {
//                     offset: 1,
//                     color: 'rgb(204, 46, 72)'
//                 }])
//             }
//         }
//     }, {
//         name: '2015',
//         data: data[1],
//         type: 'scatter',
//         symbolSize: function (data) {
//             return Math.sqrt(data[2]) / 5e2;
//         },
//         label: {
//             emphasis: {
//                 show: true,
//                 formatter: function (param) {
//                     return param.data[3];
//                 },
//                 position: 'top'
//             }
//         },
//         itemStyle: {
//             normal: {
//                 shadowBlur: 10,
//                 shadowColor: 'rgba(25, 100, 150, 0.5)',
//                 shadowOffsetY: 5,
//                 color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
//                     offset: 0,
//                     color: 'rgb(129, 227, 238)'
//                 }, {
//                     offset: 1,
//                     color: 'rgb(25, 183, 207)'
//                 }])
//             }
//         }
//     }]
// };
// myChart.setOption(option);
 //依次为横坐标、纵坐标(-10到10之间)、圆形面积，第三个参数为圆形半径，约定最小为5px,最大值为20
      var data_buy11= [[-6,4,15],[-8,-2,25],[-4,4,35]]; //[[-6,4,20],[-8,-2,15],[-4,4,20]];  //买入上涨区
      var data_buy12= [[2,-4,20]]; //[[2,-4,5]];  //买入下跌区
      var data_sell11= [[-6,4,20],[-8,-2,15]]; //[[-6,4,20],[-8,-2,15] ]; //卖出上涨区
      var data_sell12= [[2,-4,18]]; //[[2,-4,5]];      //卖出下跌区

      var colorList_buy = ['#FB4B4B','#4BB036'];
      // var itemStyle_buy = {
      //   normal: {
      //     color: function(params) {
      //       // for bar
      //       return zrColor.lift(colorList_buy[params.seriesIndex], params.seriesIndex * 0.1 );
      //     }
      //   }
      // };
      // var myChart_pm_buy = ec.init(document.getElementById('J_pm_buy'));
      // var option_pm_buy= {
      //   color:['#FB4B4B','#4BB036'],
      //   splitLine:true,
      //   grid: {
      //     borderWidth:11,
      //     x:40,
      //     y: 50
      //   },
      //   tooltip : {
      //     trigger: 'axis',
      //     showDelay : 0,
      //     // formatter : function (params) {
      //     //   if (params.value.length > 1) {
      //     //     return  '买入时涨幅：'+ params.value[0] + '% '
      //     //       + '</br>当天收盘涨幅：'+ params.value[1] + '% '
      //     //       +'</br>成交金额：'+params.value[2];
      //     //   }
      //     // },
      //     axisPointer:{
      //       type : 'line'
      //     }
      //   },
      //   xAxis : [
      //     {
      //       min:-10,
      //       max:10,
      //       axisLine:{
      //         show:false
      //       } ,
      //       splitNumber:10,
      //       type : 'value',
      //       axisLabel : {
      //         formatter: '{value} '
      //       }
      //     }
      //   ],
      //   yAxis : [
      //     {
      //       type : 'value',
      //       min:-10,
      //       max:10,
      //       axisLine:{
      //         show:false
      //       } ,
      //       splitNumber:10,
      //       axisLabel : {
      //         formatter: '{value} '
      //       }
      //     }
      //   ],
      //   series : [
      //     {
      //       name:'scatter1',
      //       type:'scatter',
      //       data: data_buy11,
      //       symbol:"circle",
      //       itemStyle:{
      //         color:"#F00"
      //       },
      //       symbolSize: 35
      //     },
      //     {
      //       name:'scatter2',
      //       type:'scatter',
      //       data: [[2,-4,5]],
      //       symbol:"circle",
      //       itemStyle:{
      //          normal:{
      //            color:"#ff0"
      //          }
      //       },
      //       symbolSize: 25
      //     }
      //   ]
      // };
      // myChart.setOption(option_pm_buy);
      // // $scope.myPmScatterBuy.setOption(option_pm_buy);
      // //买入时分布图start
      // //卖出分布start
      // var colorList_sell = ['#4BB036','#FB4B4B'];
      // var itemStyle_sell = {
      //   normal: {
      //     color: function(params) {
      //       // for bar
      //       return zrColor.lift(colorList_sell[params.seriesIndex], params.seriesIndex * 0.1 );
      //     }
      //   }
      // };
      // // var myChart_pm_sell = ec.init(document.getElementById('J_pm_sell'));
      var option_pm_sell= {
        splitLine:false,
        grid: {
          borderWidth:0,
          x:40,
          y: 5
        },
        tooltip : {
          trigger: 'axis',
          showDelay : 0,
          // formatter : function (params) {
          //   if (params.value.length > 1) {
          //     return  '卖出时涨幅：'+ params.value[0] + '% '
          //       + '</br>当天收盘涨幅：'+ params.value[1] + '% '
          //       +'</br>成交金额：'+params.value[2];
          //   }
          // },
          axisPointer:{
            type : 'none'
          }
        },
        xAxis : [
          {
            min:-10,
            max:10,
            axisLine:{
              show:false
            } ,
            splitNumber:10,
            type : 'value',
            axisLabel : {
              formatter: '{value} '
            }
          }
        ],
        yAxis : [
          {
            type : 'value',
            min:-10,
            max:10,
            axisLine:{
              show:false
            } ,
            splitNumber:10,
            axisLabel : {
              formatter: '{value} '
            }
          }
        ],
        series : [
          {
            name:'scatter1',
            type:'scatter',
            data: data_sell11,   //依次为横坐标、纵坐标、圆形面积，面积最大值约定为20
            symbol:"circle",
            // itemStyle:itemStyle_sell,
            symbolSize: function (value){
              return value[2];
            }
          },
          {
            name:'scatter2',
            type:'scatter',
            data: data_sell12,
            symbol:"circle",
            // itemStyle:itemStyle_sell,
            symbolSize: function (value){
              return value[2];
            }
          }
        ]
      };
      // $scope.myPmScatterSell.setOption(option_pm_sell);

    myChart.setOption(option_pm_sell);
</script>
</body>  
</html>  